<template>
  <div class="container-article">
      <!-- 搜索区域 -->
      <el-card>
        <!-- 头部 -->
          <div slot="header">
           <!-- 自己封装的组件实现 -->
           <my-bread>内容管理</my-bread>
          </div>
          <!-- 内容 -->
          <el-form label-width="80px" size="small">
            <el-form-item label="状态：">
              <el-radio-group v-model="reqParams.status">
                <el-radio :label="null">全部</el-radio>
                <el-radio :label="0">草稿</el-radio>
                <el-radio :label="1">待审核</el-radio>
                <el-radio :label="2">审核通过</el-radio>
                <el-radio :label="3">审核失败</el-radio>
                <el-radio :label="4">已删除</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="频道：">
              <!-- 使用公共组件my-channel 父子组件传递-->
              <!-- :value="reqParams.channel_id" @input="reqParams.channel_id=$event" 
               v-model="reqParams.channel_id"的语法糖-->
              <my-channel v-model="reqParams.channel_id"></my-channel>
            </el-form-item>
            <el-form-item label="日期：">
              <!-- 组件产生两个数据，是数组收集数据，[开始日期,结束日期] -->
              <el-date-picker
                @change="changeDate"
                value-format="yyyy-MM-dd"
                v-model="dateArr"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search()">筛选</el-button>
            </el-form-item>
          </el-form>
          </el-card>  
          <!-- 结果区域 -->
          <el-card style="margin-top:20px">
            <div slot="header">
              根据筛选条件共计查询到{{total}}条结果
            </div>
            <!-- 表格和分页 -->
            <el-table :data="articles">
                <el-table-column label="封面">
                  <template slot-scope="scope">
                    <el-image :src="scope.row.cover.images[0]" style="width:180px;height:120px">
                      <div slot="error" class="image-slot">
                        <img src="../../assets/error.gif" alt=""  style="width:180px;height:120px">
                      </div>
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column label="标题" prop="title" width="400px"></el-table-column>
                <el-table-column label="状态">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.status===0" type="info">草稿</el-tag>
                    <el-tag v-if="scope.row.status===1">待审核</el-tag>
                    <el-tag v-if="scope.row.status===2" type="success">审核通过</el-tag>
                    <el-tag v-if="scope.row.status===3" type="warning">审核失败</el-tag>
                    <el-tag v-if="scope.row.status===4" type="danger">已删除</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="发布时间" prop="pubdate"></el-table-column>
                <el-table-column label="操作" width="120px">
                  <template slot-scope="scope">
                    <el-button @click="toEdit(scope.row.id)" type="primary" icon="el-icon-edit" circle plain></el-button>
                    <el-button @click="delArticle(scope.row.id)" type="danger" icon="el-icon-delete" circle plain></el-button>
                  </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              style="margin-top:20px"
              background
              layout="prev, pager, next"
              @current-change="changePager"
              :current-page="reqParams.page"
              :page-size="reqParams.per_page"
              :total="total"
            ></el-pagination>
          </el-card>
    </div>  
</template>

<script>
// 导入封装的组件 插槽 
// 加深  插槽封装全局化所以注释掉
// import MyBread from '@/components/my-bread'
export default {
  // components: {  } 意思为引入组件，组件可以写在别的文件中，也可以写在本文件中
  // components:{MyBread:MyBread},
    //取名要求：不要和原生的标签重名,vue会给你报错 （组件的配置对象name属性    new Vue({component})  Vue.component(组件名称,组件配置对象)）
    name:'page-article',
    // created(){
    //   //发送获取当前登录用户的文章 测试
    //   this.$http.get('articles').then(res=>{
    //     console.log(res.data)
    //   }).catch(e=>{
    //     console.log(e)
    //   })
    // }
    data () {
      return {
        // 频道选项数据
        channelOptions:[],
        // 筛选添加对象（发给后台的参数，保证和后台要求的字段一致）
        reqParams: {
          // 0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除，不传为全部(null)
          status: null,
          // 默认查询全部，频道ID
          channel_id: null,
          // 日期范围：开始
          begin_pubdate: null,
          // 日期范围：结束
          end_pubdate: null,
          // 页码 
          page:1,
          // 每页条数
          per_page:20,
        },
        // 支持日期范围组件的数据，当你选择日期范围后分别给 begin和end日期赋值
        dateArr: [],
        // 文章数组 
        articles:[],
         // 总条数
          total:0,
      }
    },
    created(){
      this.getArticles()
    },
    methods:{
      // 去删除
      delArticle(id){
        this.$confirm('此操作将永久删除该文章, 是否继续?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          // 点击确认，发删除请求
          try {
            // 1. 测试账户的文章数据，后台限制不能删除
            // 2. 请求成功，后台没有响应内容，
            await this.$http.delete(`articles/${id}`)
            this.$message.success('删除文章成功')
            this.getArticles()
          } catch (e) {
            this.$message.error('删除文章失败')
          }
        }).catch(() => {
          // 点击取消，没有任何逻辑
        })
      },
      // 去编辑
      toEdit(id){
        this.$router.push({path:'/publish',query:{id}})
      },

        // 选择日期
      changeDate (arr) {
        // arr 是数组 [起始日期，结束日期]
        // 注意：后台需要的日期格式是 2019-10-01 这样的格式
        // 组件：支持日期格式设置
        // 注意：清空日期的时候也会触发该函数，arr数据是null
        if (arr) {
          this.reqParams.begin_pubdate = arr[0]
          this.reqParams.end_pubdate = arr[1]
        } else {
          this.reqParams.begin_pubdate = null
          this.reqParams.end_pubdate = null
        }
      },
      // 筛选方法 删除状态查询后台不支持
      search(){
        this.reqParams.page=1
        this.getArticles()
      },
      // 切换分页
      changePager (newPage) {
        this.reqParams.page = newPage
        this.getArticles()
      },
     
      async getArticles(){
        const res=await this.$http.get('articles',{params:this.reqParams})
        console.log(res)
        this.articles=res.data.data.results
        console.log( this.articles)
        this.total=res.data.data.total_count
      }
    }
}
</script>

<style scoped lang="less">
    
</style>